<!DOCTYPE html>
<%@ taglib prefix="s" uri="/struts-tags"%>
<s:set var="updateSuccessfulMsg"
  value="%{getText('info.update.successful', {getText('title.product.item.price')})}" />
<s:set var="requiredMsg" value="%{getText('error.required')}" />
<script type="text/javascript">
  function refreshProductItemPrice() {
    var id = $('#id').val();
    if ($.isNumeric(id)) {
      jQuery.ajax({
        url : '${pageContext.request.contextPath}/inventory/price/loadProductItemPrice.action',
        dataType : 'json',
        async : false,
        cache : true,
        data : {
          'itemPrice.id' : $('#itemPriceId').val()
        },
        success : function(data) {
          var version = data.version;
          var measurement = data.measurement;
          var price = data.price;
          $('#uoms').text(measurement);
          $('#version').val(version);
          $('#itemPrice').val(price);
        }
      });
    }
  }

  function focusOnFirstElement() {
    setTimeout(function() {
      $('#price-edit-dialog-form :input:visible:enabled:first').focus();
    },10);
  }

  $(function() {
    $(':input:not(:hidden)').prop('autocomplete','off');
    $('#priceEditMsg').tooltip({
      tooltipClass : "ui-state-highlight"
    });
    $('#price-edit-dialog-form').dialog({
      height : 400,
      width : 600,
      modal : true,
      close : function() {
        $(this).remove();
      }
    });
    $('#addPriceButtonDiv').addClass('ui-dialog-buttonset');
    $('.submit-button').button();
    $('#priceAddCancelBtn').click(function(e) {
      e.preventDefault();
      $('#price-edit-dialog-form').remove();
    });
    $('#priceAddOkBtn').click(function(e) {
      e.preventDefault();
      var bValid = $('#price-edit-form').valid();
      if (bValid) {
        var params = {};
        params['itemPrice.id'] = $('#itemPriceId').val();
        params['itemPrice.version'] = $('#version').val();
        params['itemPrice.price'] = $('#itemPrice').val();
        jQuery.ajax({
          url : '${pageContext.request.contextPath}/inventory/price/updateProductItemPrice.action',
          type : 'POST',
          dataType : 'json',
          cache : false,
          data : params,
          success : function(data) {
            var msg = '';
            var status = data.status;
            if (status == 'SUCCESS') {
              if (data.attrs.version) {
                var version = data.attrs.version;
                $('#version').val(version);
              }
              $('#listProductItemPrice').trigger('reloadGrid');
              $('#priceAddCancelBtn').trigger('click');
            } else if (status == 'ERROR') {
              if (data.errors) {
                var errors = data.errors;
                for ( var i = 0; i < errors.length; i++) {
                  msg += errors[i];
                  if (i < errors.length - 1) {
                    msg += ', ';
                  }
                }
              }
              $('#priceEditMsg').attr('title',msg).tooltip('open');
              setTimeout(function() {
                $('#priceEditMsg').tooltip("close").attr("title","");
              },1500);
            }
          }
        });
      }
    });
    $("#priceEditAccordion").multipleaccordion();
    $('#priceEditAccordion > div > table td.LABEL').css({
      'width' : '130px'
    });
    $('input, select, textarea, button').not(':hidden').each(function(idx) {
      $(this).prop('tabindex',idx + 1);
    });
    $('#price-edit-dialog-form').wrap('<form id="price-edit-form">');
    $.validator.setDefaults({
      errorClass : 'ui-state-error',
      errorPlacement : function(error,element) {
        if (element.context.id.indexOf('_combobox') == -1) {
          error.insertAfter(element.parent().children(':last'));
        } else {
          error.appendTo(element.parent());
        }
      }
    });
    $('#price-edit-form').validate(
        {
          rules : {
            'itemPrice' : {
              required : true,
              number : true,
              min : 0
            }
          },
          messages : {
            'itemPrice' : {
              required : jQuery.format('<s:property value="#requiredMsg" />',
                  '<s:property value="%{getText(\"field.item.price\")}" />'),
              number : jQuery.format('<s:property value="getText(\'error.numeric.required\')" />',
                  '<s:property value="%{getText(\"field.item.price\")}" />'),
              min : jQuery.format('<s:property value="getText(\'error.min\')" />',
                  '<s:property value="%{getText(\"field.item.price\")}" />',0)
            }
          }
        });
    refreshProductItemPrice();
    focusOnFirstElement();
  });
</script>
<div id="price-edit-dialog-form"
  title='<s:property value="getText('title.edit.product.item.price')"/>'>
  <div id="priceEditMsg"></div>
  <div id="priceEditAccordion">
    <h3>
      <s:property value="getText('title.product.item.price')" />
    </h3>
    <div>
      <table>
        <tr>
          <td class="LABEL"><label for="uoms"><input type="hidden" id="version"
              name="product.version" /><input type="hidden" id="itemPriceId" name="itemPrice.id"
              value='<s:property value="%{#parameters[\"itemPrice.id\"]}" />' /> <s:property
                value="getText('field.uom')" /></label></td>
          <td><label id="uoms"></label></td>
        </tr>
        <tr>
          <td class="LABEL"><label for="itemPrice" class="mandatory"><s:property
                value="getText('field.item.price')" /></label></td>
          <td><input type="text" id="itemPrice" name="itemPrice" maxlength="100"></td>
        </tr>
      </table>
    </div>
  </div>
  <div id="addPriceButtonDiv">
    <button id="priceAddOkBtn" class="submit-button">
      <s:property value="getText('button.ok')" />
    </button>
    <button id="priceAddCancelBtn" class="submit-button">
      <s:property value="getText('button.cancel')" />
    </button>
  </div>
</div>